---
title: "Accessibility Checker Rule Help: HAAC_Aria_Or_HTML5_Attr"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

* Blind people using screen readers.

### Why is this important?

Using both an HTML5 attribute and the associated ARIA attribute with the same semantic meaning on an `<input>` element can cause a conflict that allows one of the attributes to override the other. This can lead to unexpected and confusing assistive technology behavior.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### HTML5 attribute is in conflict with the associated WAI-ARIA attribute used on an input element
HTML5 attributes must not conflict with the associated WAI-ARIA attribute used on an input element

[IBM 3.3.2 Labels and Instructions](http://www.ibm.com/able/guidelines/ci162/labels_or_instructions.html)

<div id="locSnippet"></div>

### What to do

Remove one of the conflicting HTML5 or ARIA attributes from the `<input>` element.

Example using HTML5:

<CodeSnippet type="multi" light={true}>&lt;label for="phone"&gt;* Phone number: &lt;/body&gt;
&lt;input type="text" id="phone" name="phone" required&gt;</CodeSnippet>
    
Example uses both HTML5 and ARIA attribute indicating the input is required without any conflict:
    
<CodeSnippet type="multi" light={true}>&lt;label for="phone"&gt;* Phone number: &lt;/body&gt;
&lt;input type="text" id="phone" name="phone" required aria-required="true"&gt;</CodeSnippet>


</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
